<template>
  <div>
    <el-tree
      :data="treeList"
      :props="treeProps"
      show-checkbox
      node-key="id"
      default-expand-all
      :default-checked-keys="cheArr"
    ></el-tree>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getUserTree, treeListApi } from "./api";
const treeProps = {
  children: "children",
  label: "title",
};
const cheArr = ref<any[]>([]);
// const route = useRoute()
// console.log(route.query.id);
// const id=route.query.id
const treeList = ref<ItreeMenu[]>([]);
treeListApi().then((res) => {
  if (res.code === 200) {
    // console.log(res.data);
    treeList.value = res.data;
  }
});
const route = useRoute();
const id = route.query.id;
// console.log(id);

getUserTree(parseInt(id as string)).then((res) => {
  // console.log(res.data);
  if (res.code === 200) {
    cheArr.value = res.data.map((item) => {
      // return item.id
      if (item.parentId !== 0) {
        return item.id;
      }
    });
    console.log(cheArr.value);
  }
});
</script>

<style></style>
